/**
 * useRef()
 *
 *    概念：
 *        创建一个 ref 数据出来，类似之前的 React.createRef()
 *
 *    语法：
 *        const ref = useRef(initialValue)
 *          initialValue - ref数据的初始值
 *          ref          - 创建出来的ref数据，该数据是一个对象的形式，里面包含一个 current 数据
 *                         {
 *                            current: ???
 *                         }
 *                         current 默认值为 initialValue，如果该 ref 数据通过 ref 属性标记给某个元素或
 *                         组件的话，等当前组件挂载完成，current 就会变化
 */

import { forwardRef, useImperativeHandle, useRef } from "react";

// function Hello() {
//   return <h4>Hello</h4>;
// }

const Hello = forwardRef((props, ref) => {
  // 1. 转发 ref 到元素上
  // return <h4 ref={ref}>Hello</h4>;

  // 2. 转发 ref 到 useImperativeHandle 上，对外暴露
  /**
   * useImperativeHandle(ref, init, deep)
   *    ref - 转发过来的ref数据
   *    init - 一个函数，返回值会作为ref数据中的 current 内容
   *    deep - 一个依赖项数组，当 deep 的内容发送变化时，init 函数会从新执行
   */
  useImperativeHandle(ref, () => ({
    a: 1,
    b: 2,
  }));

  return <h4>Hello</h4>;
});

export default function App() {
  /**
   * Ref 数据的 current 类型，由 useRef 的第一个类型参数来决定
   */
  const h1Ref = useRef<HTMLHeadingElement>(null);

  const helloRef = useRef<{ a: number; b: number }>(null);

  console.log("h1Ref", h1Ref);

  return (
    <div>
      <h1 ref={h1Ref}>App</h1>

      <Hello ref={helloRef} />
      <button onClick={() => console.log("h1Ref", h1Ref.current)}>点我</button>
      <button onClick={() => console.log("helloRef", helloRef.current?.a)}>
        helloRef
      </button>
    </div>
  );
}
